<div layout="row">
    <div class="timeline-progress-wrapper" layout="column" flex>
            <div class="timeline-clickable-wrapper">
                <div draggable
                     axis="x"
                     enable-handle="enableTimelineHandle"
                     disable-handle="disableTimelineHandle"
                     ng-style="{left: timelineProgressHandleOffset + '%', 'transform-origin': timelineProgressHandleOffset + '% 30%'}"
                     class="timeline-progress-handle">
                </div>
            </div>
            <div class="timeline-track">
                <div class="timeline-activity-wrapper">
                    <div ng-repeat="block in activityBlocks" class="timeline-activity" ng-style="{left: timelineValueToPercentage(block.time) + '%', width: '1px'}"></div>
                </div>

                <div class="timeline-pause-activity-wrapper" ng-style="{left: pauseActivityOffset + '%'}">
                    <div class="timeline-pause-activity"></div>
                    <i class="icon ion-android-arrow-dropdown timeline-pause-activity-marker"></i>
                </div>
                <div class="timeline-progress-background" ng-style="{width: loadedBarWidth + '%'}"></div>
                <div class="timeline-progress-bar" ng-style="{width: timelineProgressBarWidth + '%'}"></div>
                <div class="timeline-buffering-animation" ng-show="isBuffering"></div>
                <div class="timeline-buffering-bar"></div>
            </div>
    </div>

    <div class="timeline-value" layout-align="center center" layout="column">
        <span layout="row">
            <span>{{ value | momentformat }} / {{ max | momentformat }}</span>
        </span>
    </div>
</div>
